.root {
    height: 100%;
    background-color: #f8f8f8;

    :global {
        .profile {
            height: 299px;
            padding: 0 15px;
            border-bottom-left-radius: 500px 120px;
            border-bottom-right-radius: 500px 120px;
            background: linear-gradient(
                318deg,
                #b2b5db 2%,
                #565482 85%,
                #494675 97%
            );
        }

        .user-info {
            display: flex;
            align-items: center;
            padding: 40px 0 15px;

            .user-name {
                flex: 1;
                margin-left: 18px;
                font-size: 24px;
                font-weight: 400;
                color: #fff;
            }

            a {
                line-height: 16px;
                color: #fff;
                font-size: 12px;
                text-decoration: none;

                &:visited {
                    color: #fff;
                }
            }

            .icon {
                width: 9px;
                height: 16px;
                vertical-align: middle;
            }
        }

        .avatar {
            width: 50px;
            height: 50px;
            border: 3px solid rgba(255, 255, 255, 0.16);
            border-radius: 50%;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .read-info {
            display: flex;
            align-items: center;
            width: fit-content;
            height: 30px;
            padding: 5px 8px 5px 5px;
            border-radius: 15px;
            font-size: 12px;
            color: #f7f8fa;
            background: linear-gradient(319deg, #585089 0%, #2c2a6b 98%);

            .icon {
                margin-right: 5px;
                font-size: 20px;
            }

            span {
                display: inline-block;
                margin: 0 3px;
                font-size: 18px;
                font-weight: bold;
                color: #ffbc3d;
            }
        }

        .count-list {
            display: flex;
            justify-content: space-between;
            padding: 20px 0 15px 0;

            .count-item {
                flex: 1;
                text-align: center;
                font-size: 13px;
                color: #fff;

                p {
                    &:first-child {
                        height: 14px;
                        margin-bottom: 6px;
                    }
                }
            }
        }

        .user-links {
            display: flex;

            padding: 20px 0;
            font-size: 12px;
            text-align: center;
            background-color: #fff;
            border-radius: 10px;
            color: #333;

            .link-item {
                flex: 1;
            }

            .icon {
                margin-bottom: 11px;
                font-size: 23px;
            }
        }

        .more-service {
            // height: 120px;
            margin: 11px 16px 0 16px;
            border-radius: 10px;
            background-color: #fff;

            h3 {
                padding: 15px;
                font-size: 17px;
                color: #333;
            }

            .service-list {
                display: flex;
            }

            .service-item {
                width: 25%;
                padding-bottom: 20px;
                text-align: center;
                font-size: 13px;
            }

            .icon {
                margin-bottom: 11px;
                font-size: 22px;
            }
        }
    }
}
